<template>
  <div class="all">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <getgoods></getgoods>
    <div class="deliver">
      <span class="time">送达时间</span>
      <span class="fast">尽快送达 | 预计 19.14</span>
      <div class="bird">蜂鸟专送</div>
    </div>
    <div class="pay">
      <div class="style">
        <van-cell is-link @click="showPopup">
          <span class="s1">支付方式</span>
          <span class="s2">在线支付</span>
        </van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
          <p class="paystyle">支付方式</p>
          <van-radio-group v-model="radio">
            <div class="line1">
              <span class="p1 p2">货到付款（商家不支持货到付款）</span>
              <van-radio name="1" checked-color="#07c160" class="radio1" disabled></van-radio>
            </div>
            <div class="line1">
              <span class="p1">在线支付</span>
              <van-radio name="2" checked-color="#07c160" class="radio1"></van-radio>
            </div>
          </van-radio-group>
        </van-popup>
      </div>
      <div class="style">
        <span class="s3">红包</span>
        <span class="s4">暂时只在饿了么APP中支持</span>
      </div>
    </div>
    <div style="padding: 15px; background-color: #fff; margin: 10px 0;">
      <div class="title">
        <img :src="'https://elm.cangdu.org/img/'+this.url" alt="" style="width: 30px;margin-top: 5px;">
        <span class="title10">{{title}}</span>
      </div>
      <div class="foodsInfo" v-for="(item,index) in this.totalsInfo" :key="index">
        <div class="footsInfo1" v-if="item.num!=0">
          <div class="footsInfo1_1">{{item.name}}</div>
          <div>
            <span class="footsInfo1_2" style="color: red; margin-right: 30px;">x{{item.num}}</span>
            <span class="footsInfo1_3">￥{{item.price}}</span>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; line-height: 50px; color: rgb(121, 119, 119);">
        <span>餐盒</span>
        <div>
          <span>￥</span>
          <span>1</span>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; line-height: 50px; color: rgb(121, 119, 119);">
        <span>配送费</span>
        <div>
          <span>￥</span>
          <span>5</span>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between; line-height: 50px; color: rgb(121, 119, 119);">
        <div>
          <span>订单</span>
          <span>￥</span>
          <span>{{prices}}</span>
        </div>

        <div style="color: red;">
          <span>待支付</span>
          <span>￥</span>
          <span>{{prices}}</span>
        </div>
      </div>
    </div>
    <div class="bott" v-show="showO">
      <div style="color: white; line-height: 50px; margin-left: 15px;">
        <span>待支付</span>
        <span>￥</span>
        <span>{{this.prices}}</span>
      </div>
      <div style="background-color: rgb(86,209,118); width: 80px; text-align: center; color: white; line-height: 50px;"
        @click="submit">确认下单</div>
    </div>
    <div class="bill">
      <div class="order" @click="click1">
        <span class="o1">
          订单备注
        </span>
        <span class="o2" v-if=" Object.keys(note).length == 0">
          口味、偏好等
        </span>
        <span v-else class="remark">
          {{res}}
        </span>
        <i class="iconfont icon-jiantou"></i>
      </div>
      <div class="order" @click="click2">
        <span class="o1 o12">
          发票抬头
        </span>
        <span class="o2">
          不需要开发票
        </span>
        <i class="iconfont icon-jiantou"></i>
      </div>
    </div>
  </div>
</template>
<script>
  // import $ from "jquery";
  import Nav from "@/components/Nav.vue";
  import getgoods from "@/components/getgoods.vue";
  export default {
    name: "order",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '确认订单',
        right_name: '登录',
        show: false,
        radio: '2',
        res: "",
        arr: [],
        title: "",
        url: "",
        prices: 0,
        showO: true,
      }
    },
    components: {
      getgoods, Nav
    },
    methods: {
      showPopup() {
        this.show = true;
      },
      click1() {
        this.$router.push({ name: 'Remark' })
      },
      click2() {
        this.$router.push({ name: 'Check' })
      },
      submit() {
        this.$router.push({ name: "Getorder" })
      }
    },
    computed: {
      note() {
        return this.$store.state.nav.remark
      },
      totalsInfo() {
        return this.$store.state.pri.totals;
      },
    },
    created() {
      if (localStorage.getItem("name")) {
        this.right_name = "头像";
      } else {
        this.right_name = "登录";
      }
      for (let key in this.note) {
        this.res += `${this.note[key]} `
      }
      let a = this.$router.history.current.query.id;
      this.axios.get('https://elm.cangdu.org/shopping/restaurant/' + a).then(((res) => {
        this.title = res.data.name;
        this.url = res.data.image_path
      })).catch((err) => {
        console.log(err)
      })
      const _this = this;
      this.totalsInfo.forEach(function (v) {
        _this.prices = _this.prices + (v.num * v.price);
      })
      this.prices = this.prices + 6;
    }
  }
</script>

<style lang="less" scoped>
  .all {
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);
    margin-bottom: 50px;
  }

  .title10 {
    margin-left: 10px;
    font-size: 20px;
  }

  .footsInfo1_1 {
    color: rgb(121, 119, 119);
  }

  .footsInfo1_3 {
    color: rgb(121, 119, 119);
  }

  .bott {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    background-color: black;
    display: flex;
    justify-content: space-between;
    z-index: 100;
  }

  .getgoods {
    background-color: white;
  }

  .footsInfo1 {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .deliver {
    width: 100%;
    height: 90px;
    background-color: white;
    margin-top: -50px;
    border-left: 5px solid rgb(49, 144, 232);
    position: relative;
  }

  .time {
    width: 100px;
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    left: 20px;
    top: 35px;
  }

  .fast {
    position: absolute;
    right: 20px;
    top: 20px;
    color: rgb(49, 144, 232);
  }

  .bird {
    width: 60px;
    height: 20px;
    line-height: 20px;
    background-color: rgb(49, 144, 232);
    color: white;
    position: absolute;
    right: 20px;
    top: 55px;
    font-size: 13px;
    text-align: center;
  }

  .pay {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    background-color: white;
  }

  .style {
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .s1 {
    font-size: 15px;
    color: rgb(65, 62, 62);
  }

  .s2 {
    margin-left: 205px;
    font-size: 14px;
    color: rgb(167, 163, 163);
  }

  .icon-jiantou {
    margin-left: 5px;
    font-size: 10px;
    color: rgb(153, 151, 151);
  }

  .s3 {
    margin-left: 15px;
    font-size: 14px;
    color: rgb(167, 163, 163);
  }

  .s4 {
    font-size: 14px;
    margin-left: 145px;
    color: rgb(167, 163, 163);
  }

  .paystyle {
    text-align: center;
  }

  .line1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    float: left;
  }

  .p1 {
    float: left;
    margin-left: 20px;
    font-size: 14px;
  }

  .p2 {
    color: rgb(151, 150, 150);
  }

  .radio1 {
    float: right;
    margin-top: 10px;
    margin-right: 20px;
  }

  .bill {
    width: 100%;
    height: 100px;
    background-color: white;
    margin-top: 10px;
  }

  .order {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
  }

  .o1 {
    color: rgb(114, 111, 111);
    margin-left: 20px;
  }

  .o12 {
    font-size: 14px;

  }

  .order .icon-jiantou {
    margin-right: 17px;
  }

  .o2 {
    color: rgb(163, 162, 162);
    font-size: 14px;
    margin-left: 170px;

  }

  /* .oo2{
    color: rgb(163, 162, 162);
    font-size: 14px;
    float: right;
    display: inline-block;
  } */

  .remark {
    width: 60%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: rgb(163, 162, 162);
    position: relative;
    right: -10px;
    top: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-align: right;
  }
</style>